<template>
  <div class="home">
    <el-card>
      <el-form ref="form" :rules="rules" :model="form" label-width="100px">
        <el-form-item label="广告名称:" prop="name">
          <el-input v-model="form.name" placeholder="请输入广告名称"></el-input>
        </el-form-item>
        <el-form-item label="广告位置:" prop="spaceId">
          <el-select v-model="form.spaceId" placeholder="请选择广告位置">
            <el-option
            v-for="space of allSpaces"
            :key="space.id"
            :label="space.name"
            :value="space.id"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="开始时间" prop="startTime">
          <el-date-picker
            v-model="form.startTime"
            type="datetime"
            placeholder="请选择开始时间">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="结束时间" prop="endTime">
          <el-date-picker
            v-model="form.endTime"
            type="datetime"
            placeholder="请选择结束时间">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="上线/下线:" prop="status">
          <el-radio v-model="form.status" :label="0">下线</el-radio>
          <el-radio v-model="form.status" :label="1">上线</el-radio>
        </el-form-item>
        <el-form-item label="广告图片:" prop="img">
          <el-upload
            action="/boss/course/upload"
            list-type="picture-card"
            ref="img"
            :file-list="form.img ? [{}] : []"
            :on-exceed="onExceed"
            :limit="1"
            :on-success="uploadImgSuccess"
            :auto-upload="true">
              <el-button type="primary" size="mini">点击上传</el-button>
              <div slot="tip">
                <el-tag type="info">建议尺寸：230*300px，JPG、PNG格式，图片小于150K</el-tag>
              </div>
              <div slot="file" slot-scope="{file}">
                <img
                  class="el-upload-list__item-thumbnail"
                  :src="form.img" alt=""
                >
                <span class="el-upload-list__item-actions">
                  <span
                    v-if="form.img"
                    class="el-upload-list__item-delete"
                    @click="imgRemove(file)"
                  >
                    <i class="el-icon-delete"></i>
                  </span>
                </span>
              </div>
          </el-upload>
        </el-form-item>
        <el-form-item label="广告链接:" prop="link">
          <el-input v-model="form.link" placeholder="请输入广告链接"></el-input>
        </el-form-item>
        <el-form-item label="广告备注:" prop="text">
          <el-input type="textarea" v-model="form.text"></el-input>
        </el-form-item>
        <el-form-item style="text-align: center">
          <el-button type="primary" @click="onSubmit">提交</el-button>
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>

<script lang="ts">
import Vue from 'vue'
import { getAllSpaces, createOrUpdateAdvert, getAdById } from '@/services/advert'
import { Upload } from 'element-ui'

export default Vue.extend({
  name: 'Advert',
  props: {
    isEdit: {
      type: Boolean,
      default: false
    },
    advertId: {
      type: [String, Number]
    }
  },
  created () {
    this.loadAdSpaces()
    if (this.isEdit) {
      this.loadAdvert()
    }
  },
  data () {
    return {
      form: {
        id: null,
        name: '',
        spaceId: '',
        startTime: '',
        endTime: '',
        status: 0,
        img: '',
        link: '',
        text: ''
      },
      allSpaces: [],
      rules: {
        name: [
          { required: true, message: '请输入广告名称', trigger: 'blur' },
          { min: 2, max: 140, message: '长度在 2 到 140 个字符', trigger: 'blur' }
        ],
        spaceId: [
          { required: true, message: '请选择广告位置', trigger: 'blur' }
        ],
        startTime: [
          { required: true, message: '请选择开始时间', trigger: 'blur' }
        ],
        endTime: [
          { required: true, message: '请选择结束时间', trigger: 'blur' }
        ],
        img: [
          { required: true, message: '请选择广告图片', trigger: 'blur' }
        ],
        link: [
          { required: true, message: '请输入广告链接', trigger: 'blur' }
        ]
      }
    }
  },
  methods: {
    async loadAdvert () {
      const { data } = await getAdById({ id: this.advertId })
      this.form = data.content
    },
    async onSubmit () {
      await createOrUpdateAdvert(this.form)
      this.$message.success('保存广告成功')
      this.$router.push({
        name: 'advert'
      })
    },
    async loadAdSpaces () {
      const { data } = await getAllSpaces()
      this.allSpaces = data.content
    },
    imgRemove () {
      (this.$refs.img as Upload).clearFiles()
    },
    onExceed () {
      this.$message.error('只能上传一张图片！请先移除图片再上传')
    },
    uploadImgSuccess (file: any) {
      this.form.img = file.data.name
    }
  }
})
</script>

<style lang="scss" scoped></style>
